<style>
    #correspondenceCollege-add {
        padding: 20px 25px 25px 0px;
    }
</style>
<div class="layui-fluid" id="correspondenceCollege-add">
    <form class="layui-form" action="" lay-filter="correspondenceCollege-add-form">
        <div class="layui-form-item">
            <label class="layui-form-label febs-form-item-require">名称：</label>
            <div  class="layui-input-inline">
                <input type="text" name="fullName" minlength="2" maxlength="20" lay-verify="range|name|char"
                       autocomplete="off" class="layui-input" id="fullName">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label febs-form-item-require">简称：</label>
            <div class="layui-input-inline">
                <input type="text" name="simpleName" minlength="2" maxlength="20" lay-verify="range|name|char"
                       autocomplete="off" class="layui-input" id="simpleName">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label febs-form-item-require">地址：</label>
            <div class="layui-input-inline">
                <select name="province" id="province_add" lay-filter="province_add" lay-verify="required">
                    <option value="">请选择省</option>
                </select>
            </div>
            <div class="layui-input-inline">
                <select name="city" id="city_add" lay-filter="city_add" lay-verify="required">
                    <option value="">请选择市</option>
                </select>
            </div>
            <div class="layui-input-inline">
                <select name="area" id="area_add" lay-verify="required">
                    <option value="">请选择县/区</option>
                </select>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label febs-form-item-require">详细地址：</label>
            <div class="layui-input-block">
                <input type="text" name="address" minlength="2" maxlength="50" lay-verify="range|name|char"
                       autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label febs-form-item-require">座机：</label>
            <div class="layui-input-inline">
                <input type="tel" name="fixedLine" lay-verify="fixedLine|required" autocomplete="off" class="layui-input">
            </div>
            <div style="padding-top: 8px;">
                <label>示例:029-12345678/0291-1234567</label>
            </div>
        </div>
        <div class="layui-form-item layui-form-text">
            <label class="layui-form-label">备注：</label>
            <div class="layui-input-block">
                <textarea name="remark" maxlength="200" class="layui-textarea"></textarea>
            </div>
        </div>
        <div class="layui-form-item febs-hide">
            <button class="layui-btn" lay-submit="" lay-filter="correspondenceCollege-add-form-submit" id="submit"></button>
            <button type="reset" class="layui-btn" id="reset"></button>
        </div>
    </form>
</div>

<script>
    layui.use(['febs', 'form', 'validate'], function () {
        let $ = layui.$,
            febs = layui.febs,
            layer = layui.layer,
            form = layui.form,
            validate = layui.validate;

        form.verify(validate);
        form.render();

        form.on('submit(correspondenceCollege-add-form-submit)', function (data) {
            febs.post(ctx + 'correspondenceCollege/add', data.field, function () {
                layer.closeAll();
                febs.alert.success('新增函授站成功');
                $('#businesses-correspondenceCollege').find('#query').click();
            });
            return false;
        });

        //查询省份
        $.ajax({
            type:'get',
            url:'province',
            success:function(res){
                for(var i=0;i<res.data.length;i++){
                    let provinces = res.data[i];
                    $("#province_add").append(new Option(provinces.provinceName,provinces.id));
                    //console.log(provinces.provinceName+"ooooooo")
                }
                layui.form.render("select");
            }
        });

        //省市联动
        form.on('select(province_add)',function () {

            var pid = $("#province_add").val();
            var c=document.getElementById("city_add");
            c.options.length=1;
            layui.form.render("select");
            $.ajax({
                type:'get',
                url:'city',
                data:{"pid":pid},
                success:function(res) {
                    if(res != null && res != ''){
                        for (var i = 0; i < res.data.length; i++) {
                            let citys = res.data[i];
                            $("#city_add").append(new Option(citys.cityName, citys.id));
                        }
                        layui.form.render("select");
                    }

                }
            })
        })

        //市区联动
        form.on('select(city_add)',function () {
            var cid = $("#city_add").val();
            var c=document.getElementById("area_add");
            c.options.length=1;
            layui.form.render("select");
            $.ajax({
                type:'get',
                url:'area',
                data:{"cid":cid},
                success:function(res) {
                    console.log("市")
                    for (var i = 0; i < res.data.length; i++) {
                        let areas = res.data[i];
                        $("#area_add").append(new Option(areas.areaName, areas.id));
                    }
                    layui.form.render("select");
                }
            })
        })
    });
</script>